<script lang="ts" setup>
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
const searchValue = ref<string>('')
// const searchMarker = ref<AMap.Marker>()
// const searchInfoWindow = ref<AMap.InfoWindow>()
/**
 * @param isLinkAge 是否与当前页面产生联动
 * @param auto AMap AutoComplelte插件实例
 * @param placeSearch AMap PlaceSearch插件实例
 */
interface Props {
  auto: any
  map: AMap.Map | undefined
  placeSearch: any
  isLinkAge?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  auto: undefined,
  map: undefined,
  isLinkAge: false
})
const emits = defineEmits(['select'])
const querySearchAsync = (queryString: string, cb: any) => {
  props.auto.search(queryString, (status: string, result: any) => {
    if (status === 'complete') {
      // 假设 result.tips 是一个数组，并且每个元素都包含一个name属性
      const suggestions = result.tips.map((tip: any) => ({
        value: tip.name, // 这里是实际显示在autocomplete下拉列表中的值
        ...tip
        // ...您可以根据需要添加更多属性，比如地址、区域等
      }))
      cb(suggestions)
    } else {
      cb([])
    }
  })
}
const handleSelect = (event: any) => {
  if (props.isLinkAge) {
    emits('select', event.location)
    return
  }
  props.placeSearch.setCity(event.adcode)
  props.placeSearch.search(event.name) //关键字查询查询
}
</script>

<template>
  <div class="search-place-autocomplete">
    <el-autocomplete
      v-model="searchValue"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
      placeholder="请输入需要搜索的位置"
      clearable
      :highlight-first-item="true"
      :fit-input-width="true"
    />
  </div>
</template>

<style scoped>
.search-place-autocomplete {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 200;
}
</style>
